<template>
    <div>
        <div class="score-card-title"></div>
        <div class="score-card">
            <el-table :data="rows" style="width: 100%">
                <el-table-column type="index" width="80">
                    <template slot-scope="scope">
                        <div class="card-index">
                            <div>{{rows[scope.$index]}}</div>
                            <div>
                                <div v-for="(i, idx) in levels" :key="i" :style="idx | numToColor">
                                    {{i}}
                                </div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>

export default {
    name: 'ScoreIndex',
    props: {
        levels: {
            type: Array,
            default: () => [1000, 850, 700, 500, 250, 100, 70, 50, 10, 5, 3, 1],
        },
        rows: {
            type: Array,
            default: () => ['HGT', 'TMP', 'u', 'v', 'w'],
        },
    },
    data() {
        return {
        }
    },
    filters: {
        numToColor(value) {
            let r = 0xbb, g = 0xee, b = 0xff;
            value += 3;
            r -= value * 20;
            g -= value * 10;
            b -= value * 10;
            return {
                backgroundColor: `rgb(${r}, ${g}, ${b})`,
            }
        }
    },
}
</script>

<style lang="scss" scoped>
@import '../../assets/css/DFcontent.scss';
    .score-card-title {
        color: #909399;
        text-align: center;
        height: 1em;
        line-height: 1em;
        font-weight: bold;
    }
    .score-card {
        //width: 100%;
        .card-index {
            display: flex;
            align-items: center;
            div {
                flex: 1;
                &:last-child {
                    display: flex;
                    flex-direction: column;
                    div {
                        height: 1em;
                        line-height: 1em;
                        text-align: center;
                        color: #ffffff;
                        margin: 1px;
                    }
                }
            }
        }
        ::v-deep {
            .cell {
                text-align: center;
                padding: 0 4px;
            }
            td {
                padding: 4px 0;
            }
        }
    }
</style>